@mescius/dsimageviewer

<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ImageViewerAPI | Document Solutions Image Viewer - v9.1.3</title><meta name="description" content="Documentation for Document Solutions Image Viewer"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script><style type="text/css"> /* typedoc-theme-fresh */ /* @view-transition { navigation: auto; } */ :root { --light-color-background: #fafafe; --light-color-background-active: #eaeced; --light-color-text: #222222; --light-color-text-aside: #5e5e5e; --dark-color-background: #1a1a1c; --dark-color-background-active: #2f2f2b; --dark-color-text: #dfdfd6; --dark-color-text-aside: #b0b0b0; --dim-header-height: 2.5rem; --dim-footer-height: 0px; --light-code-background: #ffffff18; --dark-code-background: #00000018; } body { padding: 0; margin: 0; & > .container.container-main { margin: 0 auto; margin-top: var(--dim-header-height); --dim-container-main-margin-y: 0px; } } @media (prefers-color-scheme: light) { ::selection { background-color: #11111a20; } } @media (prefers-color-scheme: dark) { ::selection { background-color: #bbbbff48; } } :root[data-theme="light"] { ::selection { background-color: #11111a20; } } :root[data-theme="dark"] { ::selection { background-color: #bbbbff48; } } h1, h2, h3, h4, h5, h6 { font-weight: 500; } .tsd-page-toolbar { position: fixed; background: linear-gradient( to bottom, color-mix(in srgb, var(--color-background) 80%, transparent) 60%, transparent ); backdrop-filter: blur(2px); border-bottom: none; .title { font-weight: 500; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-width: 0; margin-right: auto; &:hover { color: var(--color-contrast-text); text-decoration: none; } } .tsd-theme-toggle { display: flex; position: relative; margin-right: 12px; color: var(--color-text-aside); select { cursor: pointer; border: 1px solid var(--color-background-active); border-radius: 4px; padding: 6px 8px; padding-left: 32px; /* Space for the icon */ font-size: 14px; background: transparent; transition: background-color 200ms; color: var(--color-text-aside); /* for Firefox and Chrome: these are inconsistent */ -moz-appearance: none; -webkit-appearance: none; &:hover { background-color: var(--color-background-active); } } } } .tsd-widget { display: flex; align-items: center; height: auto; width: auto; padding: 4px; font-size: 14px; border-radius: 4px; transition: background-color 200ms; color: var(--color-text-aside); opacity: 100%; &:hover { background-color: var(--color-background-active); } } #tsd-search-results { & > li { padding-inline: 6px; transition: background-color 200ms; } a:hover { text-decoration: none; } } .col-content { overflow: hidden; padding-block: 24px; & > .tsd-typography { padding-bottom: 24px; } } .col-sidebar { top: var(--dim-header-height); /* Relevant for tablet layout. */ } .site-menu { top: var(--dim-header-height); padding-block: 24px; box-sizing: border-box; } .page-menu { top: var(--dim-header-height); padding-block: 48px 24px; box-sizing: border-box; } .tsd-navigation, .tsd-page-navigation { > details { margin-bottom: 8px; } a { border-radius: 4px; padding-inline: 6px; margin-bottom: 2px; } a:hover { text-decoration: none; background-color: var(--color-background-active); } a.current { background-color: var(--color-background-active); span { color: var(--color-contrast-text); } } } .tsd-navigation { & > a { /* Top-level navigation anchor. */ margin-block: 16px; font-size: 18px; background: transparent !important; padding: 0; &:hover { color: var(--color-contrast-text); } } } .tsd-page-navigation { border-left: 1px solid var(--color-background-active); padding-left: 4px; padding-block: 4px; } .tsd-page-navigation-section { & > summary > svg { margin-right: 0; } & > div { margin-left: 24px; } } .tsd-page-title { color: var(--color-contrast-text); } h1 > code.tsd-tag { margin-left: 12px; } code.tsd-tag { display: inline-block; transform: translateY(-0.1em); background: var(--color-background-secondary); border: 0; border-radius: 8px; padding: 2px 4px; } .tsd-breadcrumb { margin-bottom: 12px; li:after { content: " › "; opacity: 0.4; } li:last-of-type::after { content: ""; } } .tsd-signature, .tsd-signatures .tsd-signature { border: 0; border-radius: 8px; background: var(--color-background-secondary); font-weight: 500; padding: 10px 8px; line-height: 1.3; } .tsd-anchor-icon { color: var(--color-text-aside); padding-bottom: 1px; } .tsd-kind-icon { filter: grayscale(0.5) opacity(0.8); } /* Accordion icon */ .tsd-accordion-summary > svg { color: var(--color-text-aside); opacity: 50%; stroke-width: 1px; transition: transform 200ms ease-in-out; } .tsd-accordion-summary > svg:has(+ h2) { height: 24px; width: 24px; } /* Desktop sizing */ @media (min-width: 1200px) { .container-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.5fr) minmax(0, 17rem); } .site-menu { padding-right: 8px; } .page-menu { padding-left: 24px; } .tsd-widget.menu { display: none; } } /* Tablet sizing */ @media (min-width: 770px) and (max-width: 1199px) { .page-menu { padding-block: 24px 24px; } .site-menu { padding-block: 0 24px; margin-top: 0; } .tsd-widget.menu { display: none; } .lg-show { display: none !important; } } /* Mobile sizing */ @media (max-width: 769px) { .page-menu { display: none; } .site-menu { padding: 0; } .container { padding: 0 1rem; } .has-menu .col-sidebar { padding: 0 1rem; max-height: 100dvh; } .lg-show { display: none !important; } .md-show { display: none !important; } } </style></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">Document Solutions Image Viewer</a><div id="tsd-toolbar-links"></div><div class="tsd-theme-toggle md-show" style="position: relative"><div style="position: absolute; left: 8px; top: 4px; pointer-events: none"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon-icon lucide-sun-moon"><path d="M12 2v2"></path><path d="M14.837 16.385a6 6 0 1 1-7.223-7.222c.624-.147.97.66.715 1.248a4 4 0 0 0 5.26 5.259c.589-.255 1.396.09 1.248.715"></path><path d="M16 12a4 4 0 0 0-4-4"></path><path d="m19 5-1.256 1.256"></path><path d="M20 12h2"></path></svg></div><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search" style=" border: 1px solid var(--color-background-active); border-radius: 4px; margin-left: 8px; "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search" style="margin-bottom: 1px; margin-left: 4px; margin-right: 4px;"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>Search…</button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu" style=" border: 1px solid var(--color-background-active); border-radius: 4px; margin-left: 4px; "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu" style="margin-left: 4px; margin-right: 4px;"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">ImageViewerAPI</a></li></ul><h1>Interface ImageViewerAPI</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">Defines Image Viewer API. </div></section><div class="tsd-signature">interface ImageViewerAPI { <a class="tsd-kind-property" href="#hasimage">hasImage</a>: boolean; <a class="tsd-kind-property" href="#adaptivenaturalsize">adaptiveNaturalSize</a>: <a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a>; <a class="tsd-kind-property" href="#actualsize">actualSize</a>: <a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a>; <a class="tsd-kind-property" href="#language">language</a>: string; <a class="tsd-kind-property" href="#layers">layers</a>: <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a>[]; <a class="tsd-kind-property" href="#naturalsize">naturalSize</a>: <a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a>; <a class="tsd-kind-property" href="#openparameters">openParameters</a>: <a href="../types/OpenParameters.html" class="tsd-signature-type tsd-kind-type-alias">OpenParameters</a> | undefined; <a class="tsd-kind-property" href="#undostorage">undoStorage</a>: <a href="UndoStorage.html" class="tsd-signature-type tsd-kind-interface">UndoStorage</a>; <a class="tsd-kind-property" href="#hasundo">hasUndo</a>: boolean; <a class="tsd-kind-property" href="#hasredo">hasRedo</a>: boolean; <a class="tsd-kind-property" href="#undoindex">undoIndex</a>: number; <a class="tsd-kind-property" href="#undocount">undoCount</a>: number; <a class="tsd-kind-property" href="#version">version</a>: string; <a class="tsd-kind-property" href="#framescount">framesCount</a>: number; <a class="tsd-kind-property" href="#eventbus">eventBus</a>: <a href="EventBus.html" class="tsd-signature-type tsd-kind-interface">EventBus</a>; <a class="tsd-kind-property" href="#onafteropen">onAfterOpen</a>: <a href="EventFan.html" class="tsd-signature-type tsd-kind-interface">EventFan</a>; <a class="tsd-kind-property" href="#onbeforeopen">onBeforeOpen</a>: <a href="EventFan.html" class="tsd-signature-type tsd-kind-interface">EventFan</a>; <a class="tsd-kind-property" href="#onerror">onError</a>: <a href="EventFan.html" class="tsd-signature-type tsd-kind-interface">EventFan</a>; <a class="tsd-kind-property" href="#onimagepaint">onImagePaint</a>: <a href="EventFan.html" class="tsd-signature-type tsd-kind-interface">EventFan</a>; <a class="tsd-kind-property" href="#isanimationstarted">isAnimationStarted</a>: boolean; <a class="tsd-kind-property" href="#options">options</a>: Partial<<a href="ViewerOptions.html" class="tsd-signature-type tsd-kind-interface">ViewerOptions</a>>; <a class="tsd-kind-property" href="#toolbarlayout">toolbarLayout</a>: <a href="../types/ImageToolbarLayout.html" class="tsd-signature-type tsd-kind-type-alias">ImageToolbarLayout</a>; <a class="tsd-kind-property" href="#frameindex">frameIndex</a>: number; <a class="tsd-kind-property" href="#zoom">zoom</a>: <a href="../types/ZoomSettings.html" class="tsd-signature-type tsd-kind-type-alias">ZoomSettings</a>; <a class="tsd-kind-call-signature" href="#ensurepaintlayer-1">ensurePaintLayer</a>(): <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a>; <a class="tsd-kind-call-signature" href="#removelayer-1">removeLayer</a>(layerOrIndex: string | number | <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a>): void; <a class="tsd-kind-call-signature" href="#removelayers-1">removeLayers</a>(): void; <a class="tsd-kind-call-signature" href="#applyoptions-1">applyOptions</a>(): void; <a class="tsd-kind-call-signature" href="#applytoolbarlayout-1">applyToolbarLayout</a>(): void; <a class="tsd-kind-call-signature" href="#addplugin-1">addPlugin</a>(plugin: <a href="ImageViewerPluginReference.html" class="tsd-signature-type tsd-kind-interface">ImageViewerPluginReference</a>): boolean; <a class="tsd-kind-call-signature" href="#addkeyboardlistener-1">addKeyboardListener</a>( uniqueKey: string, handler: <a href="WindowKeyboardListener.html" class="tsd-signature-type tsd-kind-interface">WindowKeyboardListener</a>, ): void; <a class="tsd-kind-call-signature" href="#removekeyboardlistener-1">removeKeyboardListener</a>(uniqueKey: string): void; <a class="tsd-kind-call-signature" href="#configurepluginmaintoolbar-1">configurePluginMainToolbar</a>( pos: number | boolean | undefined, buttonsToInsert: string[], ): void; <a class="tsd-kind-call-signature" href="#geteventcanvaspoint-1">getEventCanvasPoint</a>( event: MouseEvent | PointerEvent, includeDpi: boolean, ): <a href="PointLocation.html" class="tsd-signature-type tsd-kind-interface">PointLocation</a>; <a class="tsd-kind-call-signature" href="#setcursor-1">setCursor</a>(cursorType: <a href="../types/GlobalCursorType.html" class="tsd-signature-type tsd-kind-type-alias">GlobalCursorType</a>): void; <a class="tsd-kind-call-signature" href="#resetcursor-1">resetCursor</a>(): void; <a class="tsd-kind-call-signature" href="#togglecursor-1">toggleCursor</a>(cursorType: false | <a href="../types/GlobalCursorType.html" class="tsd-signature-type tsd-kind-type-alias">GlobalCursorType</a>): void; <a class="tsd-kind-call-signature" href="#dataurltoimagedata-1">dataUrlToImageData</a>( dataUrl: string, destinationSize?: <a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a>, ): Promise<ImageData>; <a class="tsd-kind-call-signature" href="#confirm-1">confirm</a>( confirmationText?: any, level?: "error" | "info" | "warning", title?: string, buttons?: <a href="../types/ConfirmButton.html" class="tsd-signature-type tsd-kind-type-alias">ConfirmButton</a>[], ): Promise<boolean | <a href="../types/ConfirmButton.html" class="tsd-signature-type tsd-kind-type-alias">ConfirmButton</a>>; <a class="tsd-kind-call-signature" href="#removeplugin-1">removePlugin</a>(pluginId: <a href="../types/PluginType.html" class="tsd-signature-type tsd-kind-type-alias">PluginType</a> | <a href="ImageViewerPluginReference.html" class="tsd-signature-type tsd-kind-interface">ImageViewerPluginReference</a>): void; <a class="tsd-kind-call-signature" href="#showabout-1">showAbout</a>(): void; <a class="tsd-kind-call-signature" href="#findplugin-1">findPlugin</a>(pluginId: <a href="../types/PluginType.html" class="tsd-signature-type tsd-kind-type-alias">PluginType</a>): <a href="ImageViewerPluginReference.html" class="tsd-signature-type tsd-kind-interface">ImageViewerPluginReference</a> | null; <a class="tsd-kind-call-signature" href="#removeplugins-1">removePlugins</a>(): void; <a class="tsd-kind-call-signature" href="#clearundo-1">clearUndo</a>(): void; <a class="tsd-kind-call-signature" href="#executecommand-1">executeCommand</a>(command: <a href="UndoCommandSupport.html" class="tsd-signature-type tsd-kind-interface">UndoCommandSupport</a>): Promise<void>; <a class="tsd-kind-call-signature" href="#newimage-1">newImage</a>(options?: Partial<<a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a>> & <a href="../types/OpenParameters.html" class="tsd-signature-type tsd-kind-type-alias">OpenParameters</a>): Promise<any>; <a class="tsd-kind-call-signature" href="#open-1">open</a>( file: string | URL | Uint8Array<ArrayBufferLike>, openParameters?: <a href="../types/ImageFormatName.html" class="tsd-signature-type tsd-kind-type-alias">ImageFormatName</a> | <a href="../enums/ImageFormatCode.html" class="tsd-signature-type tsd-kind-enum">ImageFormatCode</a> | <a href="../types/OpenParameters.html" class="tsd-signature-type tsd-kind-type-alias">OpenParameters</a>, ): Promise<any>; <a class="tsd-kind-call-signature" href="#close-1">close</a>(): Promise<void>; <a class="tsd-kind-call-signature" href="#dispose-1">dispose</a>(): void; <a class="tsd-kind-call-signature" href="#showactivityspinner-1">showActivitySpinner</a>(container?: HTMLElement): void; <a class="tsd-kind-call-signature" href="#hideactivityspinner-1">hideActivitySpinner</a>(): void; <a class="tsd-kind-call-signature" href="#startanimation-1">startAnimation</a>(): void; <a class="tsd-kind-call-signature" href="#stopanimation-1">stopAnimation</a>(): void; <a class="tsd-kind-call-signature" href="#toggleanimation-1">toggleAnimation</a>(): void; <a class="tsd-kind-call-signature" href="#undo-1">undo</a>(): Promise<void>; <a class="tsd-kind-call-signature" href="#redo-1">redo</a>(): Promise<void>; <a class="tsd-kind-call-signature" href="#getevent-1">getEvent</a>(eventName: string): <a href="EventFan.html" class="tsd-signature-type tsd-kind-interface">EventFan</a>; <a class="tsd-kind-call-signature" href="#triggerevent-1">triggerEvent</a>(eventName: string, args?: Record<string, unknown>): void; <a class="tsd-kind-call-signature" href="#getoriginalimagedataurl-1">getOriginalImageDataUrl</a>(): string; <a class="tsd-kind-call-signature" href="#getimagedataurl-1">getImageDataUrl</a>(): string; <a class="tsd-kind-call-signature" href="#setimagedataurl-1">setImageDataUrl</a>(dataUrl: any): Promise<void>; <a class="tsd-kind-call-signature" href="#showsecondtoolbar-1">showSecondToolbar</a>(toolbarKey: <a href="../types/SecondToolbarType.html" class="tsd-signature-type tsd-kind-type-alias">SecondToolbarType</a>): Promise<void>; <a class="tsd-kind-call-signature" href="#hidesecondtoolbar-1">hideSecondToolbar</a>(toolbarKey?: <a href="../types/SecondToolbarType.html" class="tsd-signature-type tsd-kind-type-alias">SecondToolbarType</a>): Promise<void>; <a class="tsd-kind-call-signature" href="#openlocalfile-1">openLocalFile</a>(): void; <a class="tsd-kind-call-signature" href="#save-1">save</a>(options?: string | <a href="../types/SaveOptions.html" class="tsd-signature-type tsd-kind-type-alias">SaveOptions</a>, original?: boolean): void; <a class="tsd-kind-call-signature" href="#showmessage-1">showMessage</a>( message: string, details: string, severity: "error" | "info" | "warn" | "debug", ): void; }</div><section class="tsd-panel"><h4>Implemented by</h4><ul class="tsd-hierarchy"><li><a href="../classes/DsImageViewer.html" class="tsd-signature-type tsd-kind-class">DsImageViewer</a></li><li><a href="../classes/GcImageViewer.html" class="tsd-signature-type tsd-kind-class">GcImageViewer</a></li></ul></section><div style="margin-top: 64px"></div><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Methods</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="ensurepaintlayer">ensurePaintLayer<a href="#ensurepaintlayer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="ensurepaintlayer-1">ensurePaintLayer(): <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a><a href="#ensurepaintlayer-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography">Create at least one image layer which will be used for painting. </div><h4 class="tsd-returns-title">Returns <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a></h4></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="removelayer">removeLayer<a href="#removelayer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="removelayer-1">removeLayer(layerOrIndex: string | number | <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a>): void<a href="#removelayer-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography">Remove and dispose image layer given by argument layerOrIndex. </div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li>layerOrIndex: string | number | <a href="ImageLayer.html" class="tsd-signature-type tsd-kind-interface">ImageLayer</a><div class="tsd-comment tsd-typography">Image layer or image layer index or image layer name. </div></li></ul></div><h4 class="tsd-returns-title">Returns void</h4></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="removelayers">removeLayers<a href="#removelayers" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="removelayers-1">removeLayers(): void<a href="#removelayers-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography">Remove and dispose all image layers. </div><h4 class="tsd-returns-title">Returns void</h4></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="applyoptions">applyOptions<a href="#applyoptions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="applyoptions-1">applyOptions(): void<a href="#applyoptions-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography">Call this method in order to apply changed options. </div><h4 class="tsd-returns-title">Returns void</h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript">viewer.applyOptions(); </code><button type="button">Copy</button></pre> </div></div></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="applytoolbarlayout">applyToolbarLayout<a href="#applytoolbarlayout" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="applytoolbarlayout-1">applyToolbarLayout(): void<a href="#applytoolbarlayout-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography">Call this method in order to apply changes in @see:toolbarLayout. </div><h4 class="tsd-returns-title">Returns void</h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-1">Example<a href="#example-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript">viewer.toolbarLayout.viewer.default = ["open", "save"]; viewer.applyToolbarLayout(); </code><button type="button">Copy</button></pre> </div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-2">Example<a href="#example-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="javascript"> const viewer = new DsImageViewer(document.querySelector("#viewer")); const toolbar = viewer.toolbar; const toolbarLayout = viewer.toolbarLayout; toolbar.addItem({ key: 'custom-action', icon: { type: "svg", content: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #205F78;" d="M20.25 12l-2.25 2.25 2.25 2.25-3.75 3.75-2.25-2.25-2.25 2.25-2.25-2.25-2.25 2.25-3.75-3.75 2.25-2.25-2.25-2.25 2.25-2.25-2.25-2.25 3.75-3.75 2.25 2.25 2.25-2.25 2.25 2.25 2.25-2.25 3.75 3.75-2.25 2.25 2.25 2.25z"></path></s