@mescius/dsimageviewer
Version:
Document Solutions Image Viewer
439 lines (366 loc) • 57.6 kB
HTML
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ViewerOptions | 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><span class="lg-show" style="margin-left: 4px; margin-right: 12ch;">Search…</span></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">ViewerOptions</a></li></ul><h1>Interface ViewerOptions</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Image Viewer options.</p>
</div><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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">friendlyFileName:</span><span class="hl-2"> </span><span class="hl-4">"sample.png"</span><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div></div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">ViewerOptions</span> <span class="tsd-signature-symbol">{</span><br/> <a class="tsd-kind-property" href="#viewerbackground">viewerBackground</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#customicons">customIcons</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><a href="../types/MainToolbarIcon.html" class="tsd-signature-type tsd-kind-type-alias">MainToolbarIcon</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Element</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#friendlyfilename">friendlyFileName</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#file">file</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#fontnames">fontNames</a><span class="tsd-signature-symbol">?:</span> <a href="../types/FontsOptions.html" class="tsd-signature-type tsd-kind-type-alias">FontsOptions</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#gifoptions">gifOptions</a><span class="tsd-signature-symbol">:</span> <a href="../types/GifOptions.html" class="tsd-signature-type tsd-kind-type-alias">GifOptions</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#imagequality">imageQuality</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#hidetoolbar">hideToolbar</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#language">language</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#maximagesize">maxImageSize</a><span class="tsd-signature-symbol">:</span> <a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#oninitialized">onInitialized</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">viewer</span><span class="tsd-signature-symbol">:</span> <a href="ImageViewerAPI.html" class="tsd-signature-type tsd-kind-interface">ImageViewerAPI</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#savebutton">saveButton</a><span class="tsd-signature-symbol">:</span> <a href="../types/SaveButtonOptions.html" class="tsd-signature-type tsd-kind-type-alias">SaveButtonOptions</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#theme">theme</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">false</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#undo">undo</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">false</span> <span class="tsd-signature-symbol">|</span> <a href="../types/UndoStorageOptions.html" class="tsd-signature-type tsd-kind-type-alias">UndoStorageOptions</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#zoomoptions">zoomOptions</a><span class="tsd-signature-symbol">?:</span> <a href="../types/ZoomOptions.html" class="tsd-signature-type tsd-kind-type-alias">ZoomOptions</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#openparameters">openParameters</a><span class="tsd-signature-symbol">:</span> <a href="../types/OpenParameters.html" class="tsd-signature-type tsd-kind-type-alias">OpenParameters</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#shortcuts">shortcuts</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><br/> <span class="tsd-signature-type">string</span><br/> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span><br/> <a href="../types/KeyboardShortcutDefinition.html" class="tsd-signature-type tsd-kind-type-alias">KeyboardShortcutDefinition</a> <span class="tsd-signature-symbol">|</span> <a href="../types/KeyboardShortcutDefinition.html" class="tsd-signature-type tsd-kind-type-alias">KeyboardShortcutDefinition</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><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-Properties"><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>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="viewerbackground"><span>viewer<wbr/>Background</span><a href="#viewerbackground" 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><div class="tsd-signature"><span class="tsd-kind-property">viewerBackground</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>Viewer client area background color.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-default"><h4 class="tsd-anchor-link" id="default">Default<a href="#default" 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="ts"><span class="hl-11">rgb</span><span class="hl-2">(</span><span class="hl-14">128</span><span class="hl-2">,</span><span class="hl-14">128</span><span class="hl-2">,</span><span class="hl-14">128</span><span class="hl-2">)</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="customicons"><span>custom<wbr/>Icons</span><a href="#customicons" 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><div class="tsd-signature"><span class="tsd-kind-property">customIcons</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol"><</span><a href="../types/MainToolbarIcon.html" class="tsd-signature-type tsd-kind-type-alias">MainToolbarIcon</a><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">Element</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Use this option to change the default SVG icons to custom ones.</p>
</div><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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-1">customIcons:</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-4">'open'</span><span class="hl-1">:</span><span class="hl-2"> </span><span class="hl-4">'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/></svg>'</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">});</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="friendlyfilename"><span>friendly<wbr/>File<wbr/>Name</span><a href="#friendlyfilename" 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><div class="tsd-signature"><span class="tsd-kind-property">friendlyFileName</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>Used when file name not available.</p>
</div><div class="tsd-comment tsd-typography"><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"><span class="hl-1">viewer</span><span class="hl-2">.</span><span class="hl-1">options</span><span class="hl-2">.</span><span class="hl-1">friendlyFileName</span><span class="hl-2"> = </span><span class="hl-4">"myFileName.png"</span><span class="hl-2">;</span><br/><span class="hl-1">viewer</span><span class="hl-2">.</span><span class="hl-11">applyOptions</span><span class="hl-2">();</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="file"><span>file</span><a href="#file" 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><div class="tsd-signature"><span class="tsd-kind-property">file</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">any</span></div><div class="tsd-comment tsd-typography"><p>Specifies the Image file name, URL, or binary data to be loaded in the Viewer.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-3">Example<a href="#example-3" 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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">file:</span><span class="hl-2"> </span><span class="hl-4">'sample.png'</span><span class="hl-2"> } );</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="fontnames"><code class="tsd-tag">Optional</code><span>font<wbr/>Names</span><a href="#fontnames" 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><div class="tsd-signature"><span class="tsd-kind-property">fontNames</span><span class="tsd-signature-symbol">?:</span> <a href="../types/FontsOptions.html" class="tsd-signature-type tsd-kind-type-alias">FontsOptions</a></div><div class="tsd-comment tsd-typography"><p>Array of the available font names.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-default"><h4 class="tsd-anchor-link" id="default-1">Default<a href="#default-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"><span class="hl-2">[</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'Helv'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Helvetica'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'HelveticaRegular'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Helvetica-Oblique'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'HelveticaBold'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Helvetica-Bold'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'HelveticaBoldItalic'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Helvetica-BoldOblique'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'TimesRegular'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Times-Roman'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'TimesItalic'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Times-Italic'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'TimesBold'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Times-Bold'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'TimesBoldItalic'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Times-BoldItalic'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'CourierRegular'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Courier'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'CourierItalic'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Courier-Oblique'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'CourierBold'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Courier-Bold'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'CourierBoldItalic'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Courier-BoldOblique'</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'Symbol'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Symbol'</span><span class="hl-2"> }</span><br/><span class="hl-2">]</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-4">Example<a href="#example-4" 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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-1">fontNames:</span><span class="hl-2"> [{</span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'Arial'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Arial'</span><span class="hl-2">}, {</span><span class="hl-1">value:</span><span class="hl-2"> </span><span class="hl-4">'Verdana'</span><span class="hl-2">, </span><span class="hl-1">name:</span><span class="hl-2"> </span><span class="hl-4">'Verdana'</span><span class="hl-2">}]</span><br/><span class="hl-2">});</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="gifoptions"><span>gif<wbr/>Options</span><a href="#gifoptions" 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><div class="tsd-signature"><span class="tsd-kind-property">gifOptions</span><span class="tsd-signature-symbol">:</span> <a href="../types/GifOptions.html" class="tsd-signature-type tsd-kind-type-alias">GifOptions</a></div><div class="tsd-comment tsd-typography"><p>GIF image format options.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-5">Example<a href="#example-5" 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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-1">gifOptions:</span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-1">autoPlay:</span><span class="hl-2"> </span><span class="hl-0">true</span><span class="hl-2">, </span><span class="hl-12">// start GIF animation automatically</span><br/><span class="hl-2"> </span><span class="hl-1">cumulative:</span><span class="hl-2"> </span><span class="hl-0">false</span><span class="hl-2">, </span><span class="hl-12">// disable cumulative frame rendering (clear previous frame appearance)</span><br/><span class="hl-2"> </span><span class="hl-1">playOnClick:</span><span class="hl-2"> </span><span class="hl-0">true</span><span class="hl-2">, </span><span class="hl-12">// play on click</span><br/><span class="hl-2"> </span><span class="hl-1">playOnHover:</span><span class="hl-2"> </span><span class="hl-0">false</span><span class="hl-2">, </span><span class="hl-12">// do not play on hover</span><br/><span class="hl-2"> </span><span class="hl-1">speed:</span><span class="hl-2"> </span><span class="hl-14">2</span><span class="hl-2"> </span><span class="hl-12">// double the speed</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="imagequality"><span>image<wbr/>Quality</span><a href="#imagequality" 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><div class="tsd-signature"><span class="tsd-kind-property">imageQuality</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The image quality to use for image formats that utilize lossy compression, such as JPEG and WEBP.
The value should be a number between 0 and 1, where 0 represents the lowest quality and 1 represents the highest quality.
If this option is not specified, the default value of 0.92 is used.
Please note that this option exclusively affects image editing capabilities only.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-6">Example<a href="#example-6" 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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-1">imageQuality:</span><span class="hl-2"> </span><span class="hl-14">0.5</span><span class="hl-2"> </span><span class="hl-12">// Set image quality to medium.</span><br/><span class="hl-2">});</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="hidetoolbar"><span>hide<wbr/>Toolbar</span><a href="#hidetoolbar" 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><div class="tsd-signature"><span class="tsd-kind-property">hideToolbar</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><div class="tsd-comment tsd-typography"><p>Specifies whether to hide the toolbar.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-default"><h4 class="tsd-anchor-link" id="default-2">Default<a href="#default-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="ts"><span class="hl-0">false</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-7">Example<a href="#example-7" 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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">hideToolbar:</span><span class="hl-2"> </span><span class="hl-0">true</span><span class="hl-2"> } );</span><br/>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="language"><span>language</span><a href="#language" 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><div class="tsd-signature"><span class="tsd-kind-property">language</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>User interface language.
Note, in order to use the language option,
you must specify the language option value during
the viewer initialization phase.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-8">Example<a href="#example-8" 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"><span class="hl-12">// Set UI language to Japanese:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-1">selector</span><span class="hl-2">, { </span><span class="hl-1">language:</span><span class="hl-2"> </span><span class="hl-4">'ja'</span><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="maximagesize"><span>max<wbr/>Image<wbr/>Size</span><a href="#maximagesize" 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><div class="tsd-signature"><span class="tsd-kind-property">maxImageSize</span><span class="tsd-signature-symbol">:</span> <a href="Size.html" class="tsd-signature-type tsd-kind-interface">Size</a></div><div class="tsd-comment tsd-typography"><p>Use the maxImageSize option to limit the allowed image size used by the edit actions.</p>
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="oninitialized"><span>on<wbr/>Initialized</span><a href="#oninitialized" 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><div class="tsd-signature"><span class="tsd-kind-property">onInitialized</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">viewer</span><span class="tsd-signature-symbol">:</span> <a href="ImageViewerAPI.html" class="tsd-signature-type tsd-kind-interface">ImageViewerAPI</a><span class="tsd-signature-symbol">)</span> <span class="tsd-signature-symbol">=></span> <span class="tsd-signature-type">void</span></div><div class="tsd-comment tsd-typography"><p>The onInitialized handler will be called immediately after the viewer is instantiated.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-9">Example<a href="#example-9" 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"><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-11">onInitialized</span><span class="hl-1">:</span><span class="hl-2"> (</span><span class="hl-1">viewer</span><span class="hl-2">)</span><span class="hl-0">=></span><span class="hl-2"> {</span><br/><span class="hl-2"> </span><span class="hl-12">// put viewer initialization code here.</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">});</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="savebutton"><span>save<wbr/>Button</span><a href="#savebutton" 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><div class="tsd-signature"><span class="tsd-kind-property">saveButton</span><span class="tsd-signature-symbol">:</span> <a href="../types/SaveButtonOptions.html" class="tsd-signature-type tsd-kind-type-alias">SaveButtonOptions</a></div><div class="tsd-comment tsd-typography"><p>Options for customizing the behavior and appearance of the "Save" button.</p>
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="theme"><code class="tsd-tag">Optional</code><span>theme</span><a href="#theme" 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><div class="tsd-signature"><span class="tsd-kind-property">theme</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">false</span></div><div class="tsd-comment tsd-typography"><p>Use theme option to change default viewer theme.
Available built-in themes are:
gc-blue, viewer, dark, dark-yellow, light, light-blue.
Set this option to false if you want to disable theme loading - this can be helpful if you have already included theme css.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-default"><h4 class="tsd-anchor-link" id="default-3">Default<a href="#default-3" 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="ts"><span class="hl-1">Default</span><span class="hl-2"> </span><span class="hl-1">theme</span><span class="hl-2"> </span><span class="hl-1">is</span><span class="hl-2"> </span><span class="hl-1">gc</span><span class="hl-2">-</span><span class="hl-1">blue</span><span class="hl-2">.</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-10">Example<a href="#example-10" 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"><span class="hl-12">// Require built-in light theme:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">theme:</span><span class="hl-2"> </span><span class="hl-4">"light"</span><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-11">Example<a href="#example-11" 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"><span class="hl-12">// Require built-in dark theme:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">theme:</span><span class="hl-2"> </span><span class="hl-4">"dark"</span><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-12">Example<a href="#example-12" 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"><span class="hl-12">// Load external light theme css using relative URL:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">theme:</span><span class="hl-2"> </span><span class="hl-4">"themes/light.css"</span><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-13">Example<a href="#example-13" 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"><span class="hl-12">// Load external dark theme css using an absolute URL:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">theme:</span><span class="hl-2"> </span><span class="hl-4">"http://localhost:8080/themes/dark.css"</span><span class="hl-2"> });</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-14">Example<a href="#example-14" 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"><span class="hl-12">// <link href="~/Content/light-blue.css" rel="stylesheet" /></span><br/><span class="hl-12">// Do not load theme:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-4">"#root"</span><span class="hl-2">, { </span><span class="hl-1">theme:</span><span class="hl-2"> </span><span class="hl-0">false</span><span class="hl-2"> } );</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="undo"><span>undo</span><a href="#undo" 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><div class="tsd-signature"><span class="tsd-kind-property">undo</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">false</span> <span class="tsd-signature-symbol">|</span> <a href="../types/UndoStorageOptions.html" class="tsd-signature-type tsd-kind-type-alias">UndoStorageOptions</a></div><div class="tsd-comment tsd-typography"><p>Undo state storage options.</p>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-15">Example<a href="#example-15" 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"><span class="hl-12">// Disable undo storage:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-1">selector</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-1">undo:</span><span class="hl-2"> </span><span class="hl-0">false</span><br/><span class="hl-2">});</span>
</code><button type="button">Copy</button></pre>
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example-16">Example<a href="#example-16" 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"><span class="hl-12">// Do not track "Open" and "Close" commands:</span><br/><span class="hl-0">const</span><span class="hl-2"> </span><span class="hl-10">viewer</span><span class="hl-2"> = </span><span class="hl-0">new</span><span class="hl-2"> </span><span class="hl-11">DsImageViewer</span><span class="hl-2">(</span><span class="hl-1">selector</span><span class="hl-2">, {</span><br/><span class="hl-2"> </span><span class="hl-1">undo:</span><span class="hl-2"> { </span><span class="hl-1">skipCommands:</span><span class="hl-2"> </span><span class="hl-4">"Open"</span><span class="hl-2"> }</span><br/><span class="hl-2">});</span>
</code><button type="button">Copy</button></pre>
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="zoomoptions"><code class="tsd-tag">Optional</code><span>zoom<wbr/>Options</span><a href="#zoomoptions" 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><div class="tsd-signature"><span class="tsd-kind-property">zoomOptions</span><span class="tsd-signature-symbol">?:</span> <a href="../types/ZoomOptions.html" class="tsd-signature-type tsd-kind-type-alias">ZoomOptions</a></div><div class="tsd-com